<template>
    <div class="bhhistory_container">
        <HeaderTop :goBack="true" :headTitle="'历史红包'"></HeaderTop>
        <section id="hongbao_history_ul" ref="hongbao_history_ul" class="hongbao_ul">
            <HongBaoList :list="list" :isExpired="true"></HongBaoList>
        </section>
        
    </div>
</template>

<script>
import HeaderTop from '@src/components/header/HeaderTop';
import HongBaoList from '@src/components/common/HongBaoList'
import {getExpired} from '@src/api/getData';
import {mapState} from 'vuex'
import BScroll from '@better-scroll/core'
export default {
    components:{
        HeaderTop,
        HongBaoList
    },
    computed:{
        ...mapState(['user'])
    },
    data(){
        return {
            list:[]
        }
    },
    async mounted(){
        if(this.user && this.user.user_id){
            let res = await getExpired(this.user.user_id);
            this.list=res;
            this.$nextTick(()=>{
                let clientHeight = document.documentElement.clientHeight
                let clientWidth = document.documentElement.clientWidth
                this.$refs.hongbao_history_ul.style.height =clientHeight - 2.7*20 * (clientWidth / 320)+'px';
                
                this.scroll = new BScroll('#hongbao_history_ul',{
                    deceleration: 0.001,
                    bounce: true,
                    swipeTime: 1800,
                    click: true,
                })
            })
        }
    }   
}
</script>

<style lang="scss" scoped>
@import '~@styl/mixin.scss';
.bhhistory_container{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding-top: 1.95rem;
    background: #f2f2f2;
    z-index: 212;
    .hongbao_ul{
        margin-top: 0.6rem;
        padding: 0 0.5rem 0.5rem;
        box-sizing: border-box;
        width: 100%;
    }
}
</style>